<template>
    <div class="leftFrient">
        <div class="Friend-box">
            <div class="left">
                <div class="title" style="margin-top:24px">
                    <h1>动态</h1>
                    <ul class="right-title">
                        <li><span class="iconfont">&#xe727;</span><span>收藏全部</span></li></ul>
                </div>
                <div class="frient-dt">
                   <div class="frient-dt-box">
                            <img src="../../public/homeImg/NewMusic1.jpg" @click="MessageShow = !MessageShow" alt="">
                        <ul>
                            <li class="frient-dt-title"><span>网易云云音乐</span><span>分享专辑</span></li>
                            <li>20分钟前</li>
                            <li>作词 : 田地作曲 : 舒楠编曲 : 丁豆豆都市的街巷 已灯影婆娑社区暖暖流淌的欢乐远山的村落 火苗闪烁渐渐明亮小康的思索归港的船帆 从灯塔掠过追梦脚步月下交错广场焰火在节日诉说星空升腾时代的巍峨灯火里的中国 青春婀娜灯火里的中国 胸怀辽阔灯火漫卷的万里山河初心换回了百年承诺灯火里的中国 青春婀娜灯火里的中国 胸怀辽阔灯火灿烂的中国梦灯火荡漾着心中的歌归港的船帆 从灯塔掠过</li>
                            <li>#云村音乐日历</li>
                            <li class="frient-dt-yy">
                                <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                                <div class="title-dt-yy">
                                    <span>你过得好吗</span>
                                    <span>薛之谦</span>
                                </div>
                            </li>
                            <img class="frient-dt-bottom-img" src="../../public/homeImg/cat.jpg" alt="">
                            <div class="dt-pl">
                                <ul class="dt-pl-ul">
                                <li><span class="iconfont">&#xf010d;</span><span>(345)</span></li>
                                <li @click="showZf(true)"><span class="iconfont">&#xe8b0;</span><span>(45)</span></li>
                                <li @click="showPl(true)"><span class="iconfont">&#xe607;</span><span>(463)</span></li>
                                <li><span class="iconfont">&#xf0141;</span><span></span></li>
                            </ul>  
                            </div>
                            <!-- 评论区 -->
                            <div v-show="isShowPl">
                                <CommentArea :data='CommentArea'></CommentArea>
                            </div>
                        </ul>
                   </div>
                   <div class="frient-dt-box">
                            <img src="../../public/homeImg/NewMusic1.jpg" @click="MessageShow = !MessageShow" alt="">
                        <ul>
                            <li class="frient-dt-title"><span>网易云云音乐</span><span>分享专辑</span></li>
                            <li>20分钟前</li>
                            <li>作词 : 田地作曲 : 舒楠编曲 : 丁豆豆都市的街巷 已灯影婆娑社区暖暖流淌的欢乐远山的村落 火苗闪烁渐渐明亮小康的思索归港的船帆 从灯塔掠过追梦脚步月下交错广场焰火在节日诉说星空升腾时代的巍峨灯火里的中国 青春婀娜灯火里的中国 胸怀辽阔灯火漫卷的万里山河初心换回了百年承诺灯火里的中国 青春婀娜灯火里的中国 胸怀辽阔灯火灿烂的中国梦灯火荡漾着心中的歌归港的船帆 从灯塔掠过</li>
                            <li>#云村音乐日历</li>
                            <li class="frient-dt-yy">
                                <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                                <div class="title-dt-yy">
                                    <span>你过得好吗</span>
                                    <span>薛之谦</span>
                                </div>
                            </li>
                            <img class="frient-dt-bottom-img" src="../../public/homeImg/cat.jpg" alt="">
                            <div class="dt-pl">
                                <ul class="dt-pl-ul">
                                <li><span class="iconfont">&#xf010d;</span><span>(345)</span></li>
                                <li @click="show(true)"><span class="iconfont">&#xe8b0;</span><span>(45)</span></li>
                                <li><span class="iconfont">&#xe607;</span><span>(463)</span></li>
                                <li><span class="iconfont">&#xf0141;</span><span></span></li>
                            </ul>  
                            </div>
                        </ul>
                   </div>
                  <div class="frient-dt-box">
                            <img src="../../public/homeImg/NewMusic1.jpg" @click="MessageShow = !MessageShow" alt="">
                        <ul>
                            <li class="frient-dt-title"><span>网易云云音乐</span><span>分享专辑</span></li>
                            <li>20分钟前</li>
                            <li>作词 : 田地作曲 : 舒楠编曲 : 丁豆豆都市的街巷 已灯影婆娑社区暖暖流淌的欢乐远山的村落 火苗闪烁渐渐明亮小康的思索归港的船帆 从灯塔掠过追梦脚步月下交错广场焰火在节日诉说星空升腾时代的巍峨灯火里的中国 青春婀娜灯火里的中国 胸怀辽阔灯火漫卷的万里山河初心换回了百年承诺灯火里的中国 青春婀娜灯火里的中国 胸怀辽阔灯火灿烂的中国梦灯火荡漾着心中的歌归港的船帆 从灯塔掠过</li>
                            <li>#云村音乐日历</li>
                            <li class="frient-dt-yy">
                                <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                                <div class="title-dt-yy">
                                    <span>你过得好吗</span>
                                    <span>薛之谦</span>
                                </div>
                            </li>
                            <img class="frient-dt-bottom-img" src="../../public/homeImg/cat.jpg" alt="">
                            <div class="dt-pl">
                                <ul class="dt-pl-ul">
                                <li><span class="iconfont">&#xf010d;</span><span>(345)</span></li>
                                <li @click="show(true)"><span class="iconfont">&#xe8b0;</span><span>(45)</span></li>
                                <li><span class="iconfont">&#xe607;</span><span>(463)</span></li>
                                <li><span class="iconfont">&#xf0141;</span><span></span></li>
                            </ul>  
                            </div>
                        </ul>
                   </div>
                   <div class="frient-dt-box">
                            <img src="../../public/homeImg/NewMusic1.jpg" @click="MessageShow = !MessageShow" alt="">
                        <ul>
                            <li class="frient-dt-title"><span>网易云云音乐</span><span>分享专辑</span></li>
                            <li>20分钟前</li>
                            <li>作词 : 田地作曲 : 舒楠编曲 : 丁豆豆都市的街巷 已灯影婆娑社区暖暖流淌的欢乐远山的村落 火苗闪烁渐渐明亮小康的思索归港的船帆 从灯塔掠过追梦脚步月下交错广场焰火在节日诉说星空升腾时代的巍峨灯火里的中国 青春婀娜灯火里的中国 胸怀辽阔灯火漫卷的万里山河初心换回了百年承诺灯火里的中国 青春婀娜灯火里的中国 胸怀辽阔灯火灿烂的中国梦灯火荡漾着心中的歌归港的船帆 从灯塔掠过</li>
                            <li>#云村音乐日历</li>
                            <li class="frient-dt-yy">
                                <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                                <div class="title-dt-yy">
                                    <span>你过得好吗</span>
                                    <span>薛之谦</span>
                                </div>
                            </li>
                            <img class="frient-dt-bottom-img" src="../../public/homeImg/cat.jpg" alt="">
                            <div class="dt-pl">
                                <ul class="dt-pl-ul">
                                <li><span class="iconfont">&#xf010d;</span><span>(345)</span></li>
                                <li><span class="iconfont">&#xe8b0;</span><span>(45)</span></li>
                                <li><span class="iconfont">&#xe607;</span><span>(463)</span></li>
                                <li><span class="iconfont">&#xf0141;</span><span></span></li>
                            </ul>  
                            </div>
                        </ul>
                   </div>
                </div>

                <message :data='[Message,MessageShow]'></message>
                <Dialog :data='[Message,MessageShow,ishowZf,btn]' @ishowZfF = 'ishowZfF'><span name='title' slot="title">转发</span></Dialog>
            </div>
            <!-- 朋友 右侧 -->
            <div class="right">
                <div class="right-top">
                    <div class="right-top-data">
                        <img src="../../public/homeImg/NewMusic2.jpg" alt="">
                        <div class="right-top-name">
                            <span>周棋洛李涛李泽言白起许墨的大号</span>
                        <span>CVIP.2</span>
                        <span class="iconfont sex">&#xe8b4;</span>
                        </div>
                    </div>
                    <ul>
                        <li><span>6</span><span>动态</span></li>
                        <li><span>17</span><span>关注</span></li>
                        <li><span>5</span><span>粉丝</span></li>
                    </ul>
                </div>
                <div class="right-bottom">
                    <!-- 右侧下边标题 -->
                    <div class="right-bottom-title">
                        <span>热门标题</span>
                        <div><span>更多</span><span  class="iconfont">&#xe65e;</span></div>
                    </div>
                    <!-- 右侧下边列表 -->
                    <ul>
                        <li><img src="../../public/homeImg/recommGd1.jpg" alt=""><div><span>#最后的水族馆#</span><span>2962人参与</span></div></li>
                        <li><img src="../../public/homeImg/recommGd1.jpg" alt=""><div><span>#最后的水族馆#</span><span>2962人参与</span></div></li>
                        <li><img src="../../public/homeImg/recommGd1.jpg" alt=""><div><span>#最后的水族馆#</span><span>2962人参与</span></div></li>
                        <li><img src="../../public/homeImg/recommGd1.jpg" alt=""><div><span>#最后的水族馆最后的水族馆最后的水族馆#</span><span>2962人参与</span></div></li>
                        <li><img src="../../public/homeImg/recommGd1.jpg" alt=""><div><span>#最后的水族馆#</span><span>2962人参与</span></div></li>
                    </ul>
                    <!-- 右侧下边标题 -->
                    <div class="right-bottom-title">
                        <span>认识的人</span>
                        <div><span>更多</span><span  class="iconfont">&#xe65e;</span></div>
                    </div>
                    <!-- 右侧下边列表 -->
                    <div class="right-bottom-rs">
                        <li><div><span>绑定微博，</span><span>寻找更多好友</span></div></li>
                    </div>
                    <!-- 右侧下边标题 -->
                    <div class="right-bottom-title">
                        <span>添加关注</span>
                    </div>
                         <!-- 右侧下边列表 -->
                    <ul class="right-bottom-gz">
                        <li>
                            <div class="icon-box bg1"><span class="iconfont">&#xe6b3;</span></div>
                            <div class="concent">
                                <span>明星</span>
                                <div>
                                    <span>0</span>
                                    <span class="iconfont">&#xe65e;</span>
                                </div>
                            </div>
                        </li>
                        <li>
                             <div class="icon-box bg2"><span class="iconfont">&#xe617;</span></div>
                            <div class="concent">
                                <span>音乐达人</span>
                                <div>
                                    <span>0</span>
                                    <span class="iconfont">&#xe65e;</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="icon-box bg3"><span class="iconfont">&#xe61c;</span></div>
                            <div class="concent">
                                <span>DJ</span>
                                <div>
                                    <span>0</span>
                                    <span class="iconfont">&#xe65e;</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="icon-box bg4"><span class="iconfont">&#xe617;</span></div>
                            <div class="concent">
                                <span>音乐达人</span>
                                <div>
                                    <span>0</span>
                                    <span class="iconfont">&#xe65e;</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import Message from './slotMessage.vue'
import Dialog from './slotDislog.vue'
import CommentArea from './slotCommentArea.vue'
import Service from '../utils/Service'

export default {
    name:'leftFrient',
    data() {
        return {
            Message:'转发成功',
            MessageShow:false,
            ishowZf:false,
            btn:'转发',
            isShowPl:true,
            CommentArea:Array||{}
        }
    },
    components:{
        Message,Dialog,CommentArea
    },
    mounted(){
    },
    created() {
        // this.$store.getters.updataLoginData
        // console.log(this.$store.getters.updataLoginData)
    },
    methods:{
        showZf(){
            this.ishowZf = true
        },
        //接收转发子组件传过来的内容
        ishowZfF(value){
            this.ishowZf = value
        },
        showPl(){

            this.isShowPl = true
           
        }
    }
}
</script>
<style lang="less" scoped>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.ttf?t=1658501073558') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}

    div,span,ul,li,img{
    font-size: 0;
}
    
    
.title{
        margin: 10px;
        display: flex;
           //  justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
    position: relative;
        h1{
        margin-bottom: 8px;
        color: #373737;
  
        font-size: 24px;
    
    }
    ul{
        display: flex;
        position: relative;
        li{
            margin-right: 30px;
              padding: 4px 16px;
    margin-right: 15px;
    border-radius: 17px;
            span{
            font-size: 18px;
            color: white;
            cursor: pointer;
        }
        }
 
    }
       .right-title{
            position: absolute !important;
            right: 0px !important;
             li:first-child{
             background: #f24e4e;

            }
            li:first-child:hover{
                 background: #EC4141;
            }
  
            }
    }
.Friend-box{
    display: flex;
    .left{
        flex: 1;
    }
    .right{
        width: 300px;
        border-left: 1px solid #E0E0E0;
        box-sizing: border-box;
        height: 100%;
      
        .right-top{
            background: #F5F5F7;
            padding:40px 25px 15px 25px ;
        .right-top-data{
            display: flex;
          
            align-items: center;
          
            img{
                width: 62px;
                height: 62px;
                border-radius: 50%;
            }
            .right-top-name{
                margin-left: 14px;
                span{
                font-size: 15px;
                margin-left: 4px;
                color: #353536;
            }
            .sex{
                color: #E95893;
                background: #F8C6E2;
                display: inline-block;
                padding: 2px;
                border-radius: 50%;
                font-weight: 500;
                font-size: 17px;
            }
            }
            
        }
        ul{
            margin-top: 20px;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            
            li{
                width: 80px;
                text-align: center;
                span:first-child{
                    font-weight: 500;
                    font-size: 21px;
                }
                span{
                    display: block;
                    font-size: 15px;
                    height: 35px;
                    color: #636364;
                }
            }
        }
        
    }
    .right-bottom{
        
        .right-bottom-title::after{
                 content:".";
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
        }
        .right-bottom-title{
            padding:0px 20px 0px 25px ;
            zoom:1;
            span{
                font-size: 15px;
                font-weight: 600;
                color: #373737;
                float: left;
                height: 58px;
                line-height: 58px;
            }
            div{
                float: right;
                span{
                    color: #676767;
                }
            }
        }
        ul{
            li{
                cursor: pointer;
                display: flex;
                padding:7px 8px 7px 25px ;
                img{
                    height: 45px;
                    width: 45px;
                    border-radius: 5px;
                }
                div{
                    margin-left: 10px;
                    span{
                        font-size: 14px;
                        display: block;
                    }
                    span:last-child{
                        color: #CFCFE7;
                    }
                }
            }
            li:hover{
                background: #F4F4F4;
            }
        }
        .right-bottom-rs{
             margin:7px 8px 7px 25px ;
             padding:10px 8px 10px 25px ;
             background: #F4F4F4;
             text-align: center;
             border-radius: 5px;
             span:first-child{
                font-size: 14px;
                color: #507DAF;
             }
             span{
                font-size: 14px;
                color: #636363;
             }
        }
    .right-bottom-gz{
        
        li{

            padding: 12px 8px 12px 25px;
            .icon-box{
                margin-left: 0px;
                display: flex;
             justify-content: center;
             align-items: center;
             border-radius: 50%;
             height: 42px;
             width: 42px;
           span{
             color: white;
            font-size: 21px;
           }
        }
        .concent::after{
               content:".";
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
        }
        .concent{
            width: 78%;
            span{
                line-height: 42px;
                font-size: 16px;
                color: #373737;
            }
            span:first-child{
                float: left;
            }
            div{
                float: right;
                display: flex;
                span{
                    color: #CFCFCF;
                }
            }
        }
        .bg1{
            background: #E5321C;
        }
        .bg2{
            background: #FFBD20;
        }
        .bg3{
            background: #F54E6A;
        }
        .bg4{
            background: #ED4036;
        }
        }
    }
    }
    }
}  
.frient-dt{
    margin: 10px 26px 10px 3px;
    .frient-dt-box{
        margin-top: 20px;
        display: flex;
        border-bottom: 1px solid #E0E0E0;
        img{
                width: 52px;
                height: 52px;
                border-radius: 50%;
        }
        ul{
            margin-left: 15px;
            margin-bottom: 20px;
            li{
                display: block;
                font-size: 12px;
                margin-bottom: 12px;
            }
            li:nth-child(2){
               font-size: 14px;
                color: #9F9F9F;
            }
            li:nth-child(3){
               font-size: 16px;
               line-height: 30px;
               margin-bottom: 0px;
            }
             li:nth-child(4){
               font-size: 16px;
               color: #507DAF;
            }
            .frient-dt-title{
            span{
                 font-size: 16px;
                 margin-right: 12px;
            }
            span:first-child{
                color: #507DAF;
            }
        }
        .frient-dt-bottom-img{
            max-height: 610px;
            max-width: 310;
            min-height: 220px;
            min-width: 220px;
            border-radius: 10px;
        }
        .frient-dt-yy{
            background: #F3F3F4;
            border-radius: 5px;
            display: flex;
            padding: 10px;
            img{
                 width: 52px;
                height: 52px;
                border-radius: 5px;
            }
            .title-dt-yy{
                 margin-left: 16px;
                span{
                font-size: 14px;
                color: #959596;
                display: block;
                line-height: 26px;
               
            }
            span:first-child{
                color: #343434;
                font-size: 16px;
            }
            }
        }
        .dt-pl{
            width: 100%;
            margin: 14px 10px 14px 0; 
        .dt-pl-ul{
                float: right;
                display: flex;
                li{
                        display: flex;
                        width: 70px;
                        text-align: center;
                        justify-content: center;
                        line-height: 21px;
                        align-items: center;
                        height: 21px;
                        margin-right: 15px;
                        border-right: 1px solid #E0E0E0;
                    span{
                       font-size: 15px; 
                        margin: 5px;
                       
                        cursor: pointer;
                    }
                    span:first{
                        color: #888888;
                    }
                    span:nth-child(2){
                         color: #CFCFCF;
                    }
                    span:last-child{
                       margin-right: 25px;
                    }
                    span:hover{
                       color: #B3B3B3;
                    }
                }
                li:last-child{
                    border-right:none !important;
                }
            
        }
        }
        .dt-pl:after{
   content:".";/*加一段内容*/
   display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
   height:0;/*避免生成的内容破坏原有布局高度*/
   clear:both;/*清除浮动*/
   visibility:hidden;/*让生成的内容不可见*/
  }
 .dt-pl{zoom:1;/*为IE6，7的兼容性设置*/}
        }
    }
}  
   
</style>